<template>
  <div class="content-container">
    <div class="container">
      <div class="common-layout" style="border-Right:none">
        <el-container class="content">
          <el-aside width="200px">
            <div style="margin:20px 5px 0 40px;width:170px;border-radius: 10px 20px 20px 10px;overflow:hidden">
              <el-menu style="width:170px;--el-menu-active-color: #f93684;" :router="true"
                default-active="/communication/system">
                <el-sub-menu index="1">
                  <template #title>
                    <span class="font">消息</span>
                  </template>
                  <el-menu-item index="/communication/system">
                    <span class="font">系统通知</span>
                  </el-menu-item>
                  <el-menu-item index="/communication/interaction">
                    <span class="font">互动通知</span>
                  </el-menu-item>
                  <el-menu-item index="/communication/order">
                    <span class="font">订单通知</span>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </div>

          </el-aside>
          <router-view>
          </router-view>
        </el-container>
      </div>

    </div>
  </div>

</template>


<script setup lang="ts">

</script>

<style scoped>
.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;


}

.item {
  padding: 18px 0;
}

.font {
  text-decoration: none;
  font-size: 14px;
}


.content-container {
  display: flex;
  margin: auto;
  width: 1200px;
  height: 842.09px;


}


.content {
  display: flex;
  /* align-items: center;
  justify-content: center;
  flex-direction: column; */
}
</style>